{% extends "aside/erp/base.html" %}
{% load staticfiles %}
{% block custom_tdk %}
    <title>ERP系统控制台 - WanFeng</title>
    <meta name="description" content="ERP系统控制台">
{% endblock %}

{% block page-title %}ERP系统{% endblock %}

{% block app-footer %}
    <div class="app-footer white bg p-a b-t">
    <div class="pull-right text-sm text-muted"></div>
    <span class="text-sm text-muted">WanFeng &copy; Copyright. Version 4.0.1</span>
</div>
{% endblock %}

{% block app-body %}
<div class="row-col">
<div class="col-lg b-r">
<div class="row no-gutter">
    <div class="col-xs-6 col-sm-3 b-r b-b">
        <div class="padding">
            <div><span class="pull-right"><i class="fa fa-caret-up text-primary m-y-xs"></i></span> <span class="text-muted l-h-1x"><i class="ion-ios-grid-view text-muted"></i></span></div>
            <div class="text-center">
                <h2 class="text-center _600">45</h2>
                <p class="text-muted m-b-md">公司</p>
                <div><span data-ui-jp="sparkline" data-ui-options="[2,3,2,2,1,3,6,3,2,1], {type:'line', height:20, width: '60', lineWidth:1, valueSpots:{'0:':'#818a91'}, lineColor:'#818a91', spotColor:'#818a91', fillColor:'', highlightLineColor:'rgba(120,130,140,0.3)', spotRadius:0}" class="sparkline inline"></span></div>
            </div>
        </div>
    </div>
    <div class="col-xs-6 col-sm-3 b-r b-b">
        <div class="padding">
            <div><span class="pull-right"><i class="fa fa-caret-up text-primary m-y-xs"></i></span> <span class="text-muted l-h-1x"><i class="ion-document text-muted"></i></span></div>
            <div class="text-center">
                <h2 class="text-center _600">219</h2>
                <p class="text-muted m-b-md">店铺</p>
                <div><span data-ui-jp="sparkline" data-ui-options="[1,1,0,2,3,4,2,1,2,2], {type:'line', height:20, width: '60', lineWidth:1, valueSpots:{'0:':'#818a91'}, lineColor:'#818a91', spotColor:'#818a91', fillColor:'', highlightLineColor:'rgba(120,130,140,0.3)', spotRadius:0}" class="sparkline inline"></span></div>
            </div>
        </div>
    </div>
    <div class="col-xs-6 col-sm-3 b-r b-b">
        <div class="padding">
            <div><span class="pull-right"><i class="fa fa-caret-down text-danger m-y-xs"></i></span> <span class="text-muted l-h-1x"><i class="ion-pie-graph text-muted"></i></span></div>
            <div class="text-center">
                <h2 class="text-center _600">8</h2>
                <p class="text-muted m-b-md">用户</p>
                <div><span data-ui-jp="sparkline" data-ui-options="[9,2,5,5,7,4,4,3,2,2], {type:'line', height:20, width: '60', lineWidth:1, valueSpots:{'0:':'#818a91'}, lineColor:'#818a91', spotColor:'#818a91', fillColor:'', highlightLineColor:'rgba(120,130,140,0.3)', spotRadius:0}" class="sparkline inline"></span></div>
            </div>
        </div>
    </div>
    <div class="col-xs-6 col-sm-3 b-b">
        <div class="padding">
            <div><span class="pull-right"><i class="fa fa-caret-up text-primary m-y-xs"></i></span> <span class="text-muted l-h-1x"><i class="ion-paper-airplane text-muted"></i></span></div>
            <div class="text-center">
                <h2 class="text-center _600">36</h2>
                <p class="text-muted m-b-md">新消息</p>
                <div><span data-ui-jp="sparkline" data-ui-options="[3,3,1,62,4,3,7,3,2,5], {type:'line', height:20, width: '60', lineWidth:1, valueSpots:{'0:':'#818a91'}, lineColor:'#818a91', spotColor:'#818a91', fillColor:'', highlightLineColor:'rgba(120,130,140,0.3)', spotRadius:0}" class="sparkline inline"></span></div>
            </div>
        </div>
    </div>
</div>
<div class="padding">
<div class="row">
<div class="col-sm-4">
    <div class="box">
        <div class="box-header">
            <h3>销售业绩</h3>
            <small>总计订单销售额</small></div>
        <div class="box-tool">
            <ul class="nav">
                <li class="nav-item inline"><a class="nav-link"><i class="ion-android-sync m-x-xs"></i></a></li>
                <li class="nav-item inline dropdown"><a class="nav-link" data-toggle="dropdown"><i class="ion-android-menu m-x-xs"></i></a>
                    <div class="dropdown-menu dropdown-menu-scale pull-right"><a class="dropdown-item" href="#">本周</a> <a class="dropdown-item" href="#">本月</a> <a class="dropdown-item" href="#">上周</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item">今天</a></div>
                </li>
            </ul>
        </div>
        <div>
            <canvas data-ui-jp="chart" data-ui-options="
				            {
				              type: 'line',
				              data: {
				                  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
				                  datasets: [
				                      {
				                          label: 'Dataset',
				                          data: [25, 21, 18, 20, 30, 40, 45],
				                          fill: true,
				                          backgroundColor: '#2196f3',
				                          borderColor: '#2196f3',
				                          borderWidth: 2,
				                          borderCapStyle: 'butt',
				                          borderDash: [],
				                          borderDashOffset: 0.0,
				                          borderJoinStyle: 'miter',
				                          pointBorderColor: '#2196f3',
				                          pointBackgroundColor: '#fff',
				                          pointBorderWidth: 2,
				                          pointHoverRadius: 4,
				                          pointHoverBackgroundColor: '#2196f3',
				                          pointHoverBorderColor: '#fff',
				                          pointHoverBorderWidth: 2,
				                          pointRadius: [0,4,4,4,4,4,0],
				                          pointHitRadius: 10,
				                          spanGaps: false
				                      }
				                  ]
				              },
				              options: {
				              	scales: {
				              		xAxes: [{
					                   display: false
					                }],
					                yAxes: [{
					                   display: false,
					                   ticks:{
					                   	 min: 0,
					                   	 max: 60
					               	   }
					                }]
				              	},
				              	legend: {
				              		display: false
				              	}
				              }
				            }
				            " height="150"></canvas>
        </div>
        <div class="box-body info text-center p-b-md"><span class="dark-white rounded m-r p-x p-y-xs text-info"><i class="fa fa-caret-up"></i> 20%</span> <span>增长</span></div>
    </div>
</div>
<div class="col-sm-4">
    <div class="box">
        <div class="box-header">
            <h3>订单数量</h3>
            <small>按最近30天计算</small></div>
        <div class="box-tool">
            <ul class="nav">
                <li class="nav-item inline"><a class="nav-link"><i class="ion-android-sync m-x-xs"></i></a></li>
                <li class="nav-item inline dropdown"><a class="nav-link" data-toggle="dropdown"><i class="ion-android-menu m-x-xs"></i></a>
                    <div class="dropdown-menu dropdown-menu-scale pull-right"><a class="dropdown-item" href="#">本周</a> <a class="dropdown-item" href="#">本月</a> <a class="dropdown-item" href="#">上周</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item">今天</a></div>
                </li>
            </ul>
        </div>
        <div>
            <canvas data-ui-jp="chart" data-ui-options="
				            {
				              type: 'line',
				              data: {
				                  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
				                  datasets: [
				                      {
				                          label: 'Dataset',
				                          data: [63, 57, 40, 25, 20, 22, 26],
				                          fill: true,
				                          backgroundColor: '#ef193c',
				                          borderColor: '#ef193c',
				                          borderWidth: 2,
				                          borderCapStyle: 'butt',
				                          borderDash: [],
				                          borderDashOffset: 0.0,
				                          borderJoinStyle: 'miter',
				                          pointBorderColor: '#ef193c',
				                          pointBackgroundColor: '#fff',
				                          pointBorderWidth: 2,
				                          pointHoverRadius: 4,
				                          pointHoverBackgroundColor: '#ef193c',
				                          pointHoverBorderColor: '#fff',
				                          pointHoverBorderWidth: 2,
				                          pointRadius: [0,4,4,4,4,4,0],
				                          pointHitRadius: 10,
				                          spanGaps: false
				                      }
				                  ]
				              },
				              options: {
				              	scales: {
				              		xAxes: [{
					                   display: false
					                }],
					                yAxes: [{
					                   display: false,
					                   ticks:{
					                   	 min: 0,
					                   	 max: 100
					               	   }
					                }]
				              	},
				              	legend: {
				              		display: false
				              	}
				              }
				            }
				            " height="150"></canvas>
        </div>
        <div class="box-body danger text-center p-b-md"><span class="dark-white rounded m-r p-x p-y-xs text-danger"><i class="fa fa-caret-down"></i> 25%</span> <span>下降</span></div>
    </div>
</div>
<div class="col-sm-4">
    <div class="box">
        <div class="box-header">
            <h3>待收放款</h3>
            <small>按最近7天计算</small></div>
        <div class="box-tool">
            <ul class="nav">
                <li class="nav-item inline"><a class="nav-link"><i class="ion-android-sync m-x-xs"></i></a></li>
                <li class="nav-item inline dropdown"><a class="nav-link" data-toggle="dropdown"><i class="ion-android-menu m-x-xs"></i></a>
                    <div class="dropdown-menu dropdown-menu-scale pull-right"><a class="dropdown-item" href="#">本周</a> <a class="dropdown-item" href="#">本月</a> <a class="dropdown-item" href="#">上周</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item">今天</a></div>
                </li>
            </ul>
        </div>
        <div>
            <canvas data-ui-jp="chart" data-ui-options="
				            {
				              type: 'line',
				              data: {
				                  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
				                  datasets: [
				                      {
				                          label: 'Dataset',
				                          data: [10, 15, 25, 40, 60, 75, 80],
				                          fill: true,
				                          backgroundColor: '#22b66e',
				                          borderColor: '#22b66e',
				                          borderWidth: 2,
				                          borderCapStyle: 'butt',
				                          borderDash: [],
				                          borderDashOffset: 0.0,
				                          borderJoinStyle: 'miter',
				                          pointBorderColor: '#22b66e',
				                          pointBackgroundColor: '#fff',
				                          pointBorderWidth: 2,
				                          pointHoverRadius: 4,
				                          pointHoverBackgroundColor: '#22b66e',
				                          pointHoverBorderColor: '#fff',
				                          pointHoverBorderWidth: 2,
				                          pointRadius: [0,4,4,4,4,4,0],
				                          pointHitRadius: 10,
				                          spanGaps: false
				                      }
				                  ]
				              },
				              options: {
				              	scales: {
				              		xAxes: [{
					                   display: false
					                }],
					                yAxes: [{
					                   display: false,
					                   ticks:{
					                   	 min: 0,
					                   	 max: 120
					               	   }
					                }]
				              	},
				              	legend: {
				              		display: false
				              	}
				              }
				            }
				            " height="150"></canvas>
        </div>
        <div class="box-body success text-center p-b-md"><span class="dark-white rounded m-r p-x p-y-xs text-success"><i class="fa fa-caret-up"></i> 85%</span> <span>增长</span></div>
    </div>
</div>
</div>
<div class="row">
    <div class="col-sm-6">
        <div class="box">
            <div class="box-header"><span class="label success pull-right">52</span>
                <h3>会员</h3>
            </div>
            <div class="p-b-sm">
                <ul class="list no-border m-a-0">
                    <li class="list-item"><a href="#" class="list-left"><span class="w-40 avatar danger"><span>C</span> <i class="on b-white bottom"></i></span></a>
                        <div class="list-body">
                            <div><a href="#">Chris Fox</a></div>
                            <small class="text-muted text-ellipsis">Designer, Blogger</small></div>
                    </li>
                    <li class="list-item"><a href="#" class="list-left"><span class="w-40 avatar purple"><span>M</span> <i class="on b-white bottom"></i></span></a>
                        <div class="list-body">
                            <div><a href="#">Mogen Polish</a></div>
                            <small class="text-muted text-ellipsis">Writter, Mag Editor</small></div>
                    </li>
                    <li class="list-item"><a href="#" class="list-left"><span class="w-40 avatar info"><span>J</span> <i class="off b-white bottom"></i></span></a>
                        <div class="list-body">
                            <div><a href="#">Joge Lucky</a></div>
                            <small class="text-muted text-ellipsis">Art director, Movie Cut</small></div>
                    </li>
                    <li class="list-item"><a href="#" class="list-left"><span class="w-40 avatar warning"><span>F</span> <i class="on b-white bottom"></i></span></a>
                        <div class="list-body">
                            <div><a href="#">Folisise Chosielie</a></div>
                            <small class="text-muted text-ellipsis">Musician, Player</small></div>
                    </li>
                    <li class="list-item"><a href="#" class="list-left"><span class="w-40 avatar success"><span>P</span> <i class="away b-white bottom"></i></span></a>
                        <div class="list-body">
                            <div><a href="#">Peter</a></div>
                            <small class="text-muted text-ellipsis">Musician, Player</small></div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="box">
            <div class="box-header">
                <h3>消息</h3>
            </div>
            <ul class="list-group no-border m-b">
                <li class="list-group-item"><a href="#" class="pull-left w-40 m-r"><img src="{% static '' %}aside/images/a8.jpg" class="img-responsive img-circle" alt="."></a>
                    <div class="clear"><a href="#" class="_500 block">Jonathan Doe</a> <span class="text-muted text-ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span></div>
                </li>
                <li class="list-group-item"><a href="" class="pull-left w-40 m-r"><img src="{% static '' %}aside/images/a2.jpg" class="img-responsive img-circle" alt="."></a>
                    <div class="clear"><a href="#" class="_500 block">Jack Michale</a> <span class="text-muted text-ellipsis">Sectetur adipiscing elit</span></div>
                </li>
                <li class="list-group-item"><a href="" class="pull-left w-40 m-r"><img src="{% static '' %}aside/images/a3.jpg" class="img-responsive img-circle" alt="."></a>
                    <div class="clear"><a href="#" class="_500 block">Jessi</a> <span class="text-muted text-ellipsis">Sectetur adipiscing elit</span></div>
                </li>
                <li class="list-group-item"><a href="" class="pull-left w-40 m-r"><img src="{% static '' %}aside/images/a4.jpg" class="img-responsive img-circle" alt="."></a>
                    <div class="clear"><a href="#" class="_500 block">Sodake</a> <span class="text-muted text-ellipsis">Vestibulum ullamcorper sodales nisi nec condimentum</span></div>
                </li>
            </ul>
        </div>
    </div>
</div>
</div>
</div>
<div class="col-lg w-lg w-auto-md white bg">
    <div>
        <div class="p-a">
            <h6 class="text-muted m-a-0">Quick chat</h6>
        </div>
        <div class="list inset"><a class="list-item" data-toggle="modal" data-target="#chat" data-dismiss="modal"><span class="list-left"><span class="avatar"><i class="on avatar-center no-border"></i> <img src="{% static '' %}aside/images/a1.jpg" class="w-20" alt="."></span></span> <span class="list-body text-ellipsis">Jonathan Morina</span></a> <a class="list-item" data-toggle="modal" data-target="#chat" data-dismiss="modal"><span class="list-left"><span class="avatar"><i class="on avatar-center no-border"></i> <img src="{% static '' %}aside/images/a2.jpg" class="w-20" alt="."></span></span> <span class="list-body text-ellipsis">Crystal Guerrero</span></a> <a class="list-item" data-toggle="modal" data-target="#chat" data-dismiss="modal"><span class="list-left"><span class="avatar"><i class="on avatar-center no-border"></i> <img src="{% static '' %}aside/images/a3.jpg" class="w-20" alt="."></span></span> <span class="list-body text-ellipsis">Judith Garcia</span></a> <a class="list-item" data-toggle="modal" data-target="#chat" data-dismiss="modal"><span class="list-left"><span class="avatar"><i class="away avatar-center no-border"></i> <img src="{% static '' %}aside/images/a4.jpg" class="w-20" alt="."></span></span> <span class="list-body text-ellipsis">Melissa Garza</span></a> <a class="list-item" data-toggle="modal" data-target="#chat" data-dismiss="modal"><span class="list-left"><span class="avatar"><i class="off avatar-center no-border"></i> <img src="{% static '' %}aside/images/a5.jpg" class="w-20" alt="."></span></span> <span class="list-body text-ellipsis">Douglas Torres</span></a></div>
        <div class="p-a">
            <h6 class="text-muted m-a-0">Activities</h6>
        </div>
        <div class="streamline streamline-theme m-b">
            <div class="sl-item b-success">
                <div class="sl-content">
                    <div>Finished task <a href="#" class="text-info">#features 4</a>.</div>
                    <div class="sl-date text-muted">Just now</div>
                </div>
            </div>
            <div class="sl-item b-success active">
                <div class="sl-content">
                    <div><a href="#">@Jessi</a> uploaded a file <a href="#" class="text-info">documentation.pdf</a></div>
                    <div class="sl-date text-muted">11:30</div>
                </div>
            </div>
            <div class="sl-item b-info">
                <div class="sl-content">
                    <div>Call to customer <a href="#" class="text-info">Jacob</a> and discuss the detail.</div>
                    <div class="sl-date text-muted">10:30</div>
                </div>
            </div>
            <div class="sl-item">
                <div class="sl-content">
                    <div><a href="#" class="text-info">Jessi</a> commented your post.</div>
                    <div class="sl-date text-muted">3 days ago</div>
                </div>
            </div>
            <div class="sl-item">
                <div class="sl-content">
                    <div><a href="#" class="text-info">Jessi</a> report a issue #2122.</div>
                    <div class="sl-date text-muted">Thu, 10 Mar</div>
                </div>
            </div>
            <div class="sl-item">
                <div class="sl-content">
                    <div>Prepare for presentation</div>
                    <div class="sl-date text-muted">Sat, 5 Mar</div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<div class="modal fade inactive" id="chat" data-backdrop="false">
    <div class="modal-right w-xxl dark-white b-l">
        <div class="row-col"><a data-dismiss="modal" class="pull-right text-muted text-lg p-a-sm m-r-sm">&times;</a>
            <div class="p-a b-b"><span class="h5">Chat</span></div>
            <div class="row-row light">
                <div class="row-body scrollable hover">
                    <div class="row-inner">
                        <div class="p-a-md">
                            <div class="m-b"><a href="#" class="pull-left w-40 m-r-sm"><img src="{% static '' %}aside/images/a2.jpg" alt="..." class="w-full img-circle"></a>
                                <div class="clear">
                                    <div class="p-a p-y-sm dark-white inline r">Hi John, What's up...</div>
                                    <div class="text-muted text-xs m-t-xs"><i class="fa fa-ok text-success"></i> 2 minutes ago</div>
                                </div>
                            </div>
                            <div class="m-b"><a href="#" class="pull-right w-40 m-l-sm"><img src="{% static '' %}aside/images/a3.jpg" class="w-full img-circle" alt="..."></a>
                                <div class="clear text-right">
                                    <div class="p-a p-y-sm success inline text-left r">Lorem ipsum dolor soe rooke..</div>
                                    <div class="text-muted text-xs m-t-xs">1 minutes ago</div>
                                </div>
                            </div>
                            <div class="m-b"><a href="#" class="pull-left w-40 m-r-sm"><img src="{% static '' %}aside/images/a2.jpg" alt="..." class="w-full img-circle"></a>
                                <div class="clear">
                                    <div class="p-a p-y-sm dark-white inline r">Good!</div>
                                    <div class="text-muted text-xs m-t-xs"><i class="fa fa-ok text-success"></i> 5 seconds ago</div>
                                </div>
                            </div>
                            <div class="m-b"><a href="#" class="pull-right w-40 m-l-sm"><img src="{% static '' %}aside/images/a3.jpg" class="w-full img-circle" alt="..."></a>
                                <div class="clear text-right">
                                    <div class="p-a p-y-sm success inline text-left r">Dlor soe isep..</div>
                                    <div class="text-muted text-xs m-t-xs">Just now</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="p-a b-t">
                <form>
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Say something">
                  <span class="input-group-btn">
                  <button class="btn white b-a no-shadow" type="button">SEND</button>
                  </span></div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}